import React, { useRef, useState, useMemo } from 'react';
import { Button, Tabs, Card, Col, Row, Space, Switch, Tag, Input, message, } from 'antd';
import { useAppDispatch, useAppSelector } from '../../store/reactreduxts';
import type { shopTS, typeTS } from '../../store/crmsTS';
import { actionfn } from '../../store/crmsSlice';
import * as async from '../../store/crmsSlice';

type TargetKey = React.MouseEvent | React.KeyboardEvent | string;



const TypeList: React.FC = () => {

  //获取数据
  let obj = useAppSelector(state => state.crms1)
  let dispatch = useAppDispatch()

  //筛选出对应的数据
  let newlist = useMemo(() => {
    return obj.shoplist.filter((item: shopTS) => {
      return item.typeId == obj.activeKey
    })
  }, [obj.shoplist, obj.activeKey])

  //添加的状态
  let [title, setTitle] = useState('')

  //高亮
  const onChange = (key: string) => {
    dispatch(actionfn.t_change(key))
  };

  //添加
  const add = () => {
    //非空提示
    if (title == '') {
      message.open({
        type: 'warning',
        content: '添加内容不能为空',
      });
      return
    }
    let t = new Date().getTime()
    let obj = {
      "id": t,
      "key": t.toString(),
      "typeId": t,
      "label": title
    }
    //添加的方法
    dispatch(async.async_addtypelist(obj))
    //添加完成清空输入框
    setTitle('')
  };

  const remove = (targetKey: number) => {
    let flag = obj.shoplist.some((item:shopTS) => {
      return item.typeId == targetKey
    })
    if (flag) {
      message.open({
        type: 'warning',
        content: '有数据 无法删除',
      });
      return
    }
    //删除的方法
    dispatch(async.async_deltypelist(targetKey))
  };

  const onEdit = (targetKey: TargetKey, action: 'add' | 'remove') => {
    if (action === 'add') {
      add();
    } else {
      remove(targetKey);
    }
  };

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Input style={{ width: '300px', marginRight: '10px' }} value={title} onChange={(e) => {
          setTitle(e.target.value)
        }} />
        <Button onClick={add} type='primary' >添加</Button>
      </div>

      {/* 标签栏 */}
      <Tabs
        hideAdd
        onChange={onChange}
        activeKey={obj.activeKey}
        type="editable-card"
        onEdit={onEdit}
        items={obj.typelist}
      />

      {/* 卡片组件 */}
      <div>
        <Row gutter={16}>
          {
            newlist.map((item: shopTS) => {
              return <Col span={6} key={item.id} style={{ marginBottom: '20px' }}>
                <Card title={item.title} variant="borderless" extra={<span onClick={() => {
                  //删除商品列表的方法
                  dispatch(async.async_delshoplist(item.id))
                }}>删除</span>}>
                  <div>
                    <p>  价格:{item.price}</p><br />
                    <p>  商品状态:<Switch checked={item.Collect} onChange={() => {
                      //修改状态
                      let obj = {
                        ...item,
                        Collect: !item.Collect
                      }
                      dispatch(async.async_editshoplist(obj))
                    }} /></p><br />
                    <p> 商品规格:{item.specification.map(item => {
                      return <Tag key={item} color='green'>{item}</Tag>
                    })}</p>
                  </div>
                </Card>
              </Col>
            })
          }

        </Row>
      </div>
    </div>
  );
};

export default TypeList;